import type { Language } from 'prism-react-renderer';
import Highlight, { defaultProps } from 'prism-react-renderer';
import vsDark from 'prism-react-renderer/themes/vsDark';
import vsLight from 'prism-react-renderer/themes/vsLight';

import useDarkMode from '@/hooks/useDarkMode';

export interface PrismCode {
  className?: string;
  hasPadding?: boolean;
  code: string;
  language: Language;
}

const SourceCode: React.FC<PrismCode> = props => {
  const { code, language, className = '', hasPadding = true } = props;
  const { currentDarkMode } = useDarkMode();

  return (
    <div className={className}>
      <Highlight
        {...defaultProps}
        code={code}
        language={language}
        theme={currentDarkMode === 'light' ? vsLight : vsDark}
      >
        {({ className, tokens, getLineProps, getTokenProps }) => (
          <pre
            className={`${className} font-hack font-bold`}
            style={{ padding: hasPadding ? '1.3em' : 0 }}
          >
            {tokens.map((line, i) => (
              <div {...getLineProps({ line, key: i })}>
                {line.map((token, key) => (
                  <span {...getTokenProps({ token, key })} />
                ))}
              </div>
            ))}
          </pre>
        )}
      </Highlight>
    </div>
  );
};

export default SourceCode;
